<template>
	<div class="task_baseset_wrapper">
		<div class="head">
			<h4>优先级个数设置：</h4>
			<p>可以调整对应优先级内可以处理的文件数量，默认为无限制（设为0即为无限）</p>
		</div>
		<div class="body">
			<dl>
				<dt>优先执行：</dt>
				<dd>
					<el-input-number
						size="small"
						v-model="priorityNum"
						controls-position="right"
						:min="0"
						:max="100"
						:disabled="!priorityIsEdit"
					></el-input-number>
				</dd>
				<dd>
					<template v-if="!priorityIsEdit">
						<el-button size="small" type="text" @click="handleEditPriority">编辑</el-button>
					</template>
					<template v-else>
						<el-button size="small" type="text" @click="handleSavePriority">保存</el-button>
						<el-button size="small" type="text" @click="priorityIsEdit = false">取消</el-button>
					</template>
				</dd>
			</dl>
			<dl>
				<dt>滞后执行：</dt>
				<dd>
					<el-input-number
						size="small"
						v-model="hysteresisNum"
						controls-position="right"
						:min="0"
						:max="100"
						:disabled="!hysteresisIsEdit"
					></el-input-number>
				</dd>
				<dd>
					<template v-if="!hysteresisIsEdit">
						<el-button size="small" type="text" @click="handleEditHysteresis">编辑</el-button>
					</template>
					<template v-else>
						<el-button size="small" type="text" @click="handleSaveHysteresis">保存</el-button>
						<el-button size="small" type="text" @click="hysteresisIsEdit = false">取消</el-button>
					</template>
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			priorityNum: 10,
			hysteresisNum: 10,
			priorityIsEdit: false,
			hysteresisIsEdit: false
		};
	},
	methods: {
		//编辑优先数量
		handleEditPriority() {
			this.priorityIsEdit = true;
		},
		
		//编辑滞后数量
		handleEditHysteresis() {
			this.hysteresisIsEdit = true;
		},

		//保存优先数量设置
		handleSavePriority() {
			this.priorityIsEdit = false;
		},

		//保存滞后数量设置
		handleSaveHysteresis() {
			this.hysteresisIsEdit = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.task_baseset_wrapper {
	padding: 15px;
	.head {
		h4 {
			font-size: 16px;
			font-weight: normal;
		}
		p {
			color: #999;
		}
	}
	.body {
		dl {
			display: flex;
			padding: 10px;
		}
		dt {
			width: 90px;
			text-align: right;
			color: #666;
		}
		dd {
			margin-right: 10px;
		}
	}
}
</style>
